<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="pane-shell role-rule-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               ref="dataForm"
               @keyup.enter.native="search"
               style="text-align: right">
        <!-- <el-form-item prop="roleName">
          <el-input v-model.trim="dataForm.roleName"
                    placeholder="角色名称"
                    clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     v-if="$hasPermission('sys:role:getRole')"
                     @click="search">{{ $t('query') }}</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary"
                     plain
                     icon="el-icon-plus"
                     v-if="$hasPermission('sys:role:insertRole')"
                     @click="addOrUpdateHandle()">添加角色</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column prop="roleName"
                         label="角色名称"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="remake"
                         label="备注"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         min-width="80">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       v-if="$hasPermission('sys:role:updateRole')"
                       @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       v-if="$hasPermission('sys:role:delRole')"
                       @click="deleteHandle({id:scope.row.id})">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdate"
                   @callBack="refresh"></add-or-update>
    <!-- 添加用户弹窗, 新增 / 修改 -->
    <role-user-add-or-update ref="roleUserAddOrUpdate"></role-user-add-or-update>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './role-rule-add-or-update'
import roleUserAddOrUpdate from './role-user-add-or-update'
export default {
  mixins: [mixinViewModule],
  name: '',
  mounted () {
    this.init()
  },
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/role/queryPage', // 数据列表接口，API地址
        // getRuleListURL: '/system/sysMenu/getMenuListForRole', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '/sys/role/delRole', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      deleteMsg: '删除角色,与角色所绑定的用户将变为普通用户,您确定要删除吗?',
      ruleLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      ruleData: []
    }
  },
  watch: {
  },
  components: {
    AddOrUpdate,
    roleUserAddOrUpdate
  },
  computed: {
    isShow () {
      return (val) => {
        return val.id !== '717041517844426752'
      }
    },
    isHide () {
      return (val) => {
        return val.pid !== '0'
      }
    }
  },
  methods: {
    init () {

    },
    addOrUpdateHandle (data) {
      this.$refs.addOrUpdate.init(data)
    },
    // 刷新
    refresh () {
      this.ruleData = []
      this.getDataList()
    },
    // 删除角色
    // deleteItem (id, msg) {
    //   this.deleteHandle(id, msg).then((res) => {
    //     if (res.code !== 0) { return false }
    //     this.ruleData = []
    //   })
    // },
    // 点击角色树获取对应的角色id
    handleRoleClick (data) {
      this.getRuleList(data.id)
    },
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          // const param = {}
          this.page = 1
          this.getDataList({ paramData: {
            roleName: this.dataForm.roleName
          } })
        }
      })
    },
    // 通过角色id查询对应菜单权限树结构
    getRuleList (id) {
      this.ruleLoading = true
      this.getDataList(this.mixinViewModuleOptions.getRuleListURL, false, { roleId: id }).then(res => {
        this.ruleLoading = false
        this.ruleData = []
        if (res.code !== 0) {
          return false
        }
        this.ruleData.push(...res.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.role-rule-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 100%;
  overflow: hidden;
  .operation-btn {
    flex: 1;
    border-bottom: 1px solid;
  }
  .role-box {
    flex: 10;
    display: flex;
    .role-title {
      text-align: center;
      padding: 5px;
      border-radius: 4px;
      margin: 5px;
    }
    .role-list {
      flex: 1;
      padding-right: 10px;
      position: relative;
      .role-tree {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
      }
    }
    .rule-list {
      flex: 5;
      border-left: 1px solid;
      padding-left: 10px;
      position: relative;
      overflow: hidden;
      .rule-tree {
        position: absolute;
        top: 35px;
        left: 0;
        width: 110%;
        overflow: hidden;
        overflow-y: auto;
        height: 90%;
      }
    }
  }
}
</style>
